<template>
  <div class="container">
    <h1 class="tip">确认挂号信息</h1>
    <!--  卡片,展示就诊人信息  -->
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>请选择就诊人</span>
          <el-button :icon="User" size="default" type="primary" @click="toUser"
            >添加就诊人
          </el-button>
        </div>
      </template>
      <!--     就诊人信息 -->
      <div class="user">
        <Visitor
          v-for="(user, index) in visitorUserList"
          :key="user.id"
          :currentIndex="currentIndex"
          :index="index"
          :user="user"
          class="item"
          @click="selectIndex(index)"
        />
      </div>
    </el-card>
    <!--  卡片,展示医生的信息  -->
    <div class="">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>挂号信息</span>
          </div>
        </template>
        <el-descriptions :column="2" border class="margin-top">
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">就诊日期</div>
            </template>
            {{ doctorInfo.workDate }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">就诊医院</div>
            </template>
            {{ doctorInfo.param?.hosname }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">就诊科室</div>
            </template>
            {{ doctorInfo.param?.depname }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">医生姓名</div>
            </template>
            {{ doctorInfo.docname }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">医生职称</div>
            </template>
            {{ doctorInfo.title }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">医生专长</div>
            </template>
            {{ doctorInfo.skill }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">医生服务费</div>
            </template>
            {{ doctorInfo.amount }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
    <!--  确认挂号按钮    -->
    <div class="btn">
      <el-button
        :disabled="currentIndex === -1"
        size="large"
        style="width: 250px"
        type="primary"
        @click="submitOrder()"
      >
        确认挂号
      </el-button>
    </div>
  </div>
</template>
<script lang="ts" name="RegisterStep2" setup>
import { User } from "@element-plus/icons-vue";

import { onMounted, ref } from "vue";
import { doGetSchduleDoctorInfo, doGetVisitingUser } from "@/api/hosiptal";
import { Doctor, VisitingUser } from "@/types/types.ts";
import { useRoute } from "vue-router";
import { doSubmitOrder } from "@/api/user.ts";
import router from "@/router";

let route = useRoute();
// 就诊人列表
let visitorUserList = ref<VisitingUser[]>([] as VisitingUser[]);
// 就诊医生信息
let doctorInfo = ref<Doctor>({} as Doctor);
// 存储用户确定就诊人索引
let currentIndex = ref<number>(-1);
onMounted(() => {
  // 获取就诊人信息
  getVisitingUser();
  // 获取挂号医生信息
  getSchduleDoctorInfo();
});
// 获取就诊人信息
const getVisitingUser = async () => {
  await doGetVisitingUser().then((res) => {
    if (res.code === 200) {
      visitorUserList.value = res.data;
    }
  });
};
// 获取挂号医生信息
const getSchduleDoctorInfo = async () => {
  await doGetSchduleDoctorInfo(route.query.docId).then((res) => {
    if (res.code === 200) {
      doctorInfo.value = res.data;
    }
  });
};
const selectIndex = (index: number) => {
  currentIndex.value = index;
};
// 确定挂号
const submitOrder = async () => {
  let orderId = await doSubmitOrder(
    doctorInfo.value.hoscode,
    doctorInfo.value.id,
    visitorUserList.value[currentIndex.value].userId,
  );
  router.push({
    path: "/user/order",
    query: {
      orderId,
    },
  });
};
// 预约挂号 添加就诊人按钮
const toUser = (): void => {
  router.push({
    path: "/user/patient",
    query: {
      type: "add",
    },
  });
};
</script>

<style lang="scss" scoped>
.container {
  .tip {
    font-weight: 900;
    font-size: 20px;
    color: #7f7f7f;
  }

  .box-card {
    margin: 20px 0;

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .user {
      display: flex;
      flex-wrap: wrap;

      .item {
        width: 30%;
        margin: 5px;
      }
    }
  }

  .btn {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
</style>
